<section class="sidebar">
    <div class="sidebar-form">
        <div class="input-group">
            <input type="text" name="q" class="form-control" placeholder="搜索菜单" data-toggle="menuSearch">
            <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-close sr-only"></i>
                </button>
              </span>
        </div>
    </div>
    <ul class="sidebar-menu">
        <li id="j_m_h" class="header"> </li>
    </ul>
    <div id="j_m_hide"></div>
</section>

<script>
    var topBox = $('#jtopnav');
    var sideBox = $('.sidebar-menu');

    var createTop = function () {

    };
    var setBreadCrumb = function () {

    };
    var menuLiClick = function () {
        var el = $(this);
        var m1Id = el.attr('data-id');
        setM1(m1Id);
        var el = sideBox.find('.j_menu.j_m_s_' + m1Id).each(function () {
            if ($(this).attr('data-id')) {
                $(this).find('a').click();
                return false;
            }
        });
        return false;
    };

    var menu2Click = function () {

    };

    var setM1 = function (m1Id) {
        if (m1Id) {
            var el;
            topBox.find('.j_menu').removeClass('active');
            el = topBox.find('.j_menu[data-id="' + m1Id + '"]');
            if( !el.find( "ul" ).length ){
                el.addClass('active');
            }
            sideBox.find('.j_menu').hide();
            sideBox.find('.j_menu.j_m_s_' + m1Id).show();
            sideBox.find('#j_m_h').text(el.text());
        }
    }

    var setM2 = function (m2Id) {
        if (m2Id) {
            var el = sideBox.find('.j_menu[data-id="' + m2Id + '"]');
            var m1Id = el.attr('data-m1');

            sideBox.find('.j_menu').hide().removeClass('active');
            sideBox.find('.j_menu.j_m_s_' + m1Id).show();
            el.addClass('active');
            el.parent().closest('.j_m_s_' + m1Id).addClass('active');
            el.parent('ul.treeview-menu').show();
        }
    }

    // 初始化菜单
    var initMenu = function (menu, current) {
        // 创建主菜单
        // 创建菜单节点, 寻找当前菜单
        var m1, m2, m3, o1, o2, o2j, o3, e1, e2, eg, gco, mid, a1, a1Href;

        // 遍历一级菜单
        for (var i = 0; i < menu.length; i++) {

            // 创建一级菜单元素
            o1 = menu[i];
            a1 = $('<a href="javascript:void(0);">' + o1.title + '</a>');
            a1Href = undefined;
            e1 = $('<li class="j_menu">').attr('data-id', o1.id).append(a1);
            e1.click(menuLiClick);
            topBox.append(e1);
            mid = o1.id;
            // 遍历二级菜单
            if (!o1.child) { continue; }
            for (var x in o1.child) {

                o2 = o1.child[x];

                // 带分组的二级菜单
                if (o2.length !== undefined) {
                    gco = false;
                    eg = $('\
                            <li class="j_menu treemenu tree-open j_m_s_'+ mid + '" data-m1="' + mid + '" >\
                                <a href="#" class="treemenu-item">\
                                    <i class="fa"></i>\
                                    <span>'+ x + '</span>\
                                    <span class="pull-right-container">\
                                        <i class="fa fa-angle-right pull-right"></i>\
                                    </span>\
                                </a>\
                                <ul class="treeview-menu">\
                                </ul>\
                            </li>\
                        ');
                    for (var j = 0; j < o2.length; j++) {
                        // 分组下的二级菜单使用统一的图标
                        // 取其中一个图标做为分组图标
                        o2j = o2[j];
                        if (o2j.tip && !gco) {
                            gco = true;
                            eg.find('i.fa:eq(0)').addClass('fa-' + o2j.tip);
                        };
                        e2 = $('\
                            <li class="j_menu j_m_s_'+ mid + '" data-m1="' + mid + '" data-id="' + o2j.id + '">\
                                <a class="treemenu-item pjax" href="'+ o2j.href + '" data-url="' + o2j.href + '" data-m1="' + mid + '"><i class="fa fa-bookmark-o"></i>\
                                    '+ o2j.title + '\
                                </a>\
                            </li>\
                        ');
                        eg.find('ul').append(e2);

                        // 检查当前激活菜单
                        if (o2j.url.toLowerCase() == current) {
                            m1 = o1;
                            m2 = o2j;
                        }

                        // 在三级菜单中检查激活菜单
                        if (!m1 && o2j.child) {
                            for (var k = 0; k < o2j.child.length; k++) {
                                o3 = o2j.child[k];
                                if (o3.url.toLowerCase() == current) {
                                    m1 = o1;
                                    m2 = o2j;
                                    m3 = o3;
                                }
                            }
                        }
                    }
                    sideBox.append(eg.hide())
                } else {
                    e2 = $('\
                        <li class="menu_single j_menu treemenu j_m_s_'+ mid + '" data-id="' + o2.id + '" data-m1="' + mid + '" >\
                            <a class="treemenu-item pjax" href="'+ o2.href + '" data-url="' + o2.href + '" data-m1="' + mid + '">\
                                <i class="fa fa-'+ o2.tip + '"></i>\
                                <span>'+ o2.title + '</span>\
                            </a>\
                        </li>');
                    sideBox.append(e2.hide());

                    // 检查当前激活菜单
                    if (o2.url.toLowerCase() == current) {
                        m1 = o1;
                        m2 = o2;
                    }

                    // 在三级菜单中检查激活菜单
                    if (!m1 && o2.child) {
                        for (var k = 0; k < o2.child.length; k++) {
                            o3 = o2.child[k];
                            if (o3.url.toLowerCase() == current) {
                                m1 = o1;
                                m2 = o2;
                                m3 = o3;
                            }
                        }
                    }
                }
            }

            a1.attr('href', sideBox.find('.treemenu-item.pjax[data-m1="' + mid + '"]:eq(0)').attr('href'));
        }

        // 二级菜单点击回调
        sideBox.find('a').click(function () {
            var p = $(this).parent();
            if (p.attr('data-id')) {
                setM2(p.attr('data-id'));
            }
        });

        // 设置激活菜单
        m1 && setM1(m1.id);
        m1 && setM2(m2.id);
    };


    var setBreadCrumb = function (current) {

        var m1, m2, m3, o1, o2, o2j, o3, e1, e2, eg, mid;

        // 遍历一级菜单
        for (var i = 0; i < MENU.length; i++) {
            o1 = MENU[i];
            // 遍历二级菜单
            if (!o1.child) { continue; }
            for (var x in o1.child) {
                o2 = o1.child[x];
                // 带分组的二级菜单
                if (o2.length !== undefined) {
                    for (var j = 0; j < o2.length; j++) {
                        // 分组下的二级菜单使用统一的图标
                        o2j = o2[j];
                        // 检查当前激活菜单
                        if (o2j.url.toLowerCase() == current) {
                            m1 = o1;
                            m2 = o2j;
                        }
                        // 在三级菜单中检查激活菜单
                        if (!m1 && o2j.child) {
                            for (var k = 0; k < o2j.child.length; k++) {
                                o3 = o2j.child[k];
                                if (o3.url.toLowerCase() == current) {
                                    m1 = o1;
                                    m2 = o2j;
                                    m3 = o3;
                                }
                            }
                        }
                    }
                } else {
                    // 检查当前激活菜单
                    if (o2.url.toLowerCase() == current) {
                        m1 = o1;
                        m2 = o2;
                    }
                    // 在三级菜单中检查激活菜单
                    if (!m1 && o2.child) {
                        for (var k = 0; k < o2.child.length; k++) {
                            o3 = o2.child[k];
                            if (o3.url.toLowerCase() == current) {
                                m1 = o1;
                                m2 = o2;
                                m3 = o3;
                            }
                        }
                    }
                }
            }
        }

        // <section class="content-header">
        //     <h1><i class=""></i>商铺管理</h1>
        //     <ol class="breadcrumb">
        //         <li><a href="/kcadmin/ZXShop/index.html" data-mid="231"><i class="fa fa-dashboard"></i> 大厦运营</a></li>
        //         <li><a href="#">商铺管理</a></li>
        //         <li><a href="#">商铺列表</a></li>
        //     </ol>
        // </section>

        var title = '';
        var navs = [];
        var icon = '';

        if (m1) {
            navs.push(m1);
        }

        if (m2) {
            if (m2.group) {
                navs.push({
                    'title': m2.group,
                    'href': 'javascript:viod(0);'
                });
            }
            icon = m2.tip;
            title = m2.title;
            navs.push(m2);
        }

        if (m3) {
            title += "[" + m3.title + "]";
            navs.push(m3);
        }

        var html, href, bli, bco, hco;
        var ch = $('.content-header:first');

        html = "<h1>";
        html += (icon && 0 ? '<i class="fa fa-' + icon + '"></i>' : '') + title;
        html += "</h1>";
        html += "<ol class='breadcrumb'>";

        for (var i = 0; i < navs.length; i++) {
            href = i == navs.length - 1 || i == 0 ? 'javascript:void(0);' : navs[i].href;
            bco = i == 0 ? '<i class="fa fa-dashboard"></i>' : '';
            html += '<li><a href="' + href + '">' + bco + navs[i].title + '</a></li>';
        }
        html += "</ol>";
        ch.html(html);
    };

</script>

<script>
    // 菜单
    var current = "<?php echo strtolower(CONTROLLER_NAME.'/'.ACTION_NAME)?>";
    var MENU = <?php echo json_encode(getMenus());?>;
    initMenu(MENU, current);

</script>